<template>
    <div class="home">
        <myheader title="首页" :back="false" ></myheader>
        <swipe :swipeList="swipeList" :is-full="true"></swipe>
        <div class="icons">
            <router-link tag="div" to="/home/newslist" class="icons-item">
                <img src="../assets/images/1.png" alt="">
                <p>新闻资讯</p>
            </router-link>
            <router-link tag="div" to="/home/photolist" class="icons-item">
                <img src="../assets/images/2.png" alt="">
                <p>图片分享</p>
            </router-link>
            <div class="icons-item" @click="goToGoodsList">
                <img src="../assets/images/3.png" alt="">
                <p>商品购买</p>
            </div>
            <div class="icons-item">
                <img src="../assets/images/4.png" alt="">
                <p>留言反馈</p>
            </div>
            <div class="icons-item">
                <img src="../assets/images/5.png" alt="">
                <p>视频专区</p>
            </div>
            <div class="icons-item">
                <img src="../assets/images/6.png" alt="">
                <p>联系我们</p>
            </div>
        </div>
    </div>
</template>

<script>
    import myheader from '../components/header'
    import swipe from '../components/swipe'
    import {Toast} from 'mint-ui'
    export default {
        data(){
            return {
                swipeList:[]
            }
        },
        name: "home",
        components:{
            myheader,
            swipe
        },
        methods:{
            goToGoodsList(){ //用编程式导航的方法，让页面跳转到商品列表页面
                this.$router.push({name:'shangpin'})
            },
            getSwipeData(){
                this.$http.get('api/getlunbo').then(function (response) {//成功的回调
                    this.swipeList = response.body.message

                },function (err) {//失败时候的回调
                    Toast({
                        message: '获取轮播数据失败',
                        position: 'middle',
                        duration: 5000,
                        iconClass: 'iconfont icon--search'
                    })
                })
            },
        },
        created(){ //生命周期函数，页面初始化完毕，数据挂载之前执行这个勾子函数
            this.getSwipeData()
        }
    }
</script>

<style scoped lang="scss">
.icons{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 30px;
    .icons-item{
        width: 33.33%;
        img{
            display: block;
            margin: 15px auto 0;
            width: 50%;

        }
        p{
            font-size: 12px;
            text-align: center;
        }
    }
}
</style>
